<template>
  <div class="notice container">
    <uni-nav-bar dark color="#fff" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="公告详情" @clickLeft="$ui.back()" />
    <div class="notice-list div-sizing">
      <div class="notice-title van-multi-ellipsis--l2">
        {{ info.title }}
      </div>
      <div class="notice-content" v-html="info.content" />
      <div class="notice-time div-sizing">
        {{ info.time }}
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getNoticeInfo
  } from '@/api/index'
  export default {
    data() {
      return {
        info: {},
        id: '',
        checked: false,
        loading: false
      }
    },
    onLoad(opt) {
      this.id = opt.id
      this.get_info()
    },
    methods: {
      get_info() {
        getNoticeInfo({
          id: this.id
        }).then(res => {
          if (res.code === 1) {
            this.info = res.data
          } else {
            this.$ui.toast(res.msg)
            setTimeout(() => {
              this.$ui.back()
            }, 1000)
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .notice {
    background: #f6f8f9;

    .notice-top-tag {
      width: 100%;
      height: 504rpx;
      position: fixed;
      top: 0;
      left: 0;
      // background: #15667d;
      background: rgba(#3caf5e 10%, rgba(#3caf5e, 0.3), rgba(#3caf5e, 0));
      background: -webkit-linear-gradient(#3caf5e 10%,
          rgba(#3caf5e, 0.3),
          rgba(#3caf5e, 0));
      background: -moz-linear-gradient(#3caf5e 10%,
          rgba(#3caf5e, 0.3),
          rgba(#3caf5e, 0));
      background: -o-linear-gradient(#3caf5e 10%,
          rgba(#3caf5e, 0.3),
          rgba(#3caf5e, 0));
    }

    .notice-list {
      margin: 20rpx auto;
      width: 90%;
      height: calc(100vh - 250rpx);
      padding: 20rpx 30rpx;
      overflow-y: scroll;
      z-index: 2;
      background: #ffffff;

      &>div {
        width: 100%;
      }
    }

    .notice-content {
      color: #282828;
      line-height: 34rpx;
    }

    .notice-title {
      font-size: 36rpx;
      color: #000000;
      margin-bottom: 20rpx;
    }

    .notice-time {
      font-size: 24rpx;
      color: #989898;
      padding: 60rpx 20rpx;
      // text-align: right;
    }
  }
</style>

<style lang="less">
  .notice {
    .van-checkbox {
      .van-checkbox__label {
        color: #989898;
      }
    }
  }
</style>
